<template>  
  <div>  
    <el-container class="wrapper">  
      <el-header class="header-container">  
        <div class="logo-container">  
          <img :src="logo" alt="Logo Icon" class="logo-img" />  
          <div class="welcome-text">欢迎登录</div>  
        </div>  
        <div class="right-section">  
          <div class="conversion-container">  
            <Conversion class="conversion-img" />  
            <a href="javascript:void(0)" class="conversion-link">  
              <span>登录界面,改进建议</span>  
            </a>  
          </div>  
        </div>  
      </el-header>  
      <el-main>
		  <div class="main-head">
			  <div class="context">⚠依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《未来蜂隐私政策》已上线，将更有利于保护您的个人隐私</div>
		 </div>
		  <div class="main-main">
			   <img :src="background" alt="Logo Icon" class="back-img" />  
		
			<div class="content">
				<template v-if="loginform">
				<div class="content-warn">⚠未来蜂不会以任何理由要求您转账，谨防诈骗</div>
				<div class="marquee">
					<Marquee text="账号注册后仅可使用邮箱进行登入，待登入完善信息后即可使用手机号进行登入。"/>  
				</div>
				<div class="content-title"  >密码登录</div>
				<el-form style="margin-top: 20px; padding-right: 20px;padding-left: 10px;" label-width="17px"
				      ref="formRefForLogin"  
      			 :model="form"  
             :rules="rulesForLogin">
					<el-form-item label="">
						<el-input v-model="form.username" placeholder="请输入邮箱或手机号"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input v-model="form.password" placeholder="请输入登录密码 " show-password	></el-input>
					</el-form-item>
					<div class="form-forget" @click="changeForm('forget')">忘记密码</div>
					<el-form-item>
						<el-button style="width: 100%;background-color: #fd9d94;color: aliceblue;border-color: #fd9d94;border-radius: 8px;" plain type="primary" @click="submitFormForLogin">登录</el-button>
					</el-form-item>
				</el-form>
				<div class="form-footer">
					<div class="form-footer-content" @click="changeForm('registerform')">立即注册</div>
				</div>
				</template >
					
				<template v-else-if="registerform">
						<div class="content-warn">⚠未来蜂不会以任何理由要求您转账，谨防诈骗</div>
						<div class="content-title"  >立即注册</div>
						<el-form style="margin-top: 20px; padding-right: 20px;padding-left: 10px;" label-width="17px"
						 ref="formRefForRegist"  
      			 :model="formregister"  
             :rules="rulesForRegist"  >
							<el-form-item  prop="reemail">
								<el-input v-model="formregister.reemail" placeholder="请输入电子邮箱"></el-input>
							</el-form-item>
							<div style="display: flex;">
							<el-form-item prop="recaptcha">
								<el-input v-model="formregister.recaptcha" placeholder="请输入验证码"  style="width: 100%;"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button  :disabled="disabledRegister" style="width: 100%;background-color: #fd9d94;color: aliceblue;border-color: #fd9d94;border-radius: 8px;" plain type="primary" @click="sendEmailForRegist">{{ buttonText }}</el-button>
							</el-form-item>
							</div>
							<el-form-item prop="repassword">
								<el-input v-model="formregister.repassword" placeholder="请输入密码" show-password></el-input>
							</el-form-item>
							<el-form-item>
								<el-button style="width: 100%;background-color: #fd9d94;color: aliceblue;border-color: #fd9d94;border-radius: 8px;" plain type="primary" @click="submitFormForRegist">立即注册</el-button>
							</el-form-item>
							<div class="form-forget" @click="changeForm('login')">回到登录</div>
						</el-form>
				</template>
					
				<template v-else-if="forget">
					<div class="content-warn">⚠未来蜂不会以任何理由要求您转账，谨防诈骗</div>
					<div class="content-title"  >找回密码</div>
					<el-form style="margin-top: 20px; padding-right: 20px;padding-left: 10px;" label-width="17px"
					   ref="formRefForForget"  
      			 :model="formforget"  
             :rules="rulesForForget">
						<el-form-item prop="email">
							<el-input v-model="formforget.email" placeholder="请输入电子邮箱"></el-input>
						</el-form-item>
						<div style="display: flex;">
						<el-form-item prop="Captcha">
							<el-input v-model="formforget.Captcha" placeholder="请输入验证码"  style="width: 100%;"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button style="width: 100%;background-color: #fd9d94;color: aliceblue;border-color: #fd9d94;border-radius: 8px;" plain type="primary" @click="sendEmailForForget">{{buttonText}}</el-button>
						</el-form-item>
						</div>
						<el-form-item prop="newpassword">
							<el-input v-model="formforget.newpassword" placeholder="请输入新密码" show-password></el-input>
						</el-form-item>
						<el-form-item>
							<el-button style="width: 100%;background-color: #fd9d94;color: aliceblue;border-color: #fd9d94;border-radius: 8px;" plain type="primary" @click="submitFormForForget">重置密码</el-button>
						</el-form-item>
						<div class="form-forget" @click="changeForm('login')">回到登录</div>
					</el-form>
				</template>
			</div>
		  </div>
	  </el-main>  
      <el-footer>
		  <div>
		  <a v-for="(item, index) in Array" :key="index" href="javascript:void(0)">{{ item }}</a>  
		  </div>
		  <div class="bottom"> Copyight ◎ 2012-2024 未来蜂有限公司 版权所有</div>
	  </el-footer>  
    </el-container>  
  </div>  
</template>  
  
<script setup>  
import { ref, reactive,onBeforeUnmount } from 'vue';  
import logo from '@/components/components-zjm/logo2.png';  
import background from '@/components/components-zjm/loginbackground.png';  
import Conversion from '@/components/components-zjm/conversion';  
import { get,post } from "@/plugins/axios"
import {Path} from '@/constant/index'
import { ElMessage, roleTypes } from 'element-plus'
import router from '@/router'
import VueCookies from "vue-cookies"
import Marquee from '@/views/login1-zjm/marquee.vue';
import { useUserStore } from '@/stores/pinia'
const userStore = useUserStore()
const buttonText = ref('发送验证码')
const countDown = ref(60)
let timer = null
const disabledRegister = ref(false)
const startCountDown = ()=>{
	disabledRegister.value = true
	buttonText.value=`${countDown.value}s`
	timer = setInterval(()=>{
		countDown.value--
		if(countDown.value>0){
			buttonText.value = `${countDown.value}s`
		}else{
			resetButton()
		}
	},1000)

}
const resetButton = ()=>{
	clearInterval(timer)
	disabledRegister.value = false
	buttonText.value='发送验证码'
	countDown.value=60
}

onBeforeUnmount(()=>{
	if(timer){
		clearInterval(timer)
	}
})

// 注册
const formRefForRegist = ref(null);  
const formregister = reactive({  
  reemail: '',  
  repassword: '',  
  recaptcha: ''  
});  
const rulesForRegist = {  
  reemail: [  
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },  
    { type: 'email', message: '请输入有效的电子邮箱地址', trigger: ['blur', 'change'] }  
  ],  
  recaptcha: [  
    { required: true, message: '请输入验证码', trigger: 'blur' }  
  ],  
  repassword: [  
    { required: true, message: '请输入密码', trigger: 'blur' }  
  ]  
}; 
function sendEmailForRegist(){
	startCountDown()
  get(Path.emailCheck,{column:'email',value:formregister.reemail},content => {
	   if(content){
			post(Path.sendEmail,{to:formregister.reemail,state:'普通注册'},content => {
				ElMessage({
					message:'验证码已经发送到您的邮箱，请注意查看~',
					type: 'success'
				});
			})
		} else {
			ElMessage({
				message: '该邮箱已经被使用！',
				type: 'warning',
			})
		}}	
	)
}
function submitFormForRegist() {  
  formRefForRegist.value.validate((valid) => {  
    if (valid) {  
        post(Path.registration,{
					email:formregister.reemail,
				  password:formregister.repassword,
					code:formregister.recaptcha,
				  role:2},content => {
						changeForm('login')
					})
    } else {  
      return false;  
    }  
  });  
}   

// 登入
const formRefForLogin = ref(null)
const form = reactive({  
  username: '',  
  password: ''  
}); 
const rulesForLogin = {  
  username: [  
    { required: true, message: '请输入邮箱或手机号', trigger: 'blur' }  
  ],  
  password: [  
    { required: true, message: '请输入密码', trigger: 'blur' }  
  ]  
};
function submitFormForLogin() {  
  formRefForLogin.value.validate((valid) => {  
    if (valid) {  
       post(Path.login,{
				username: form.username,
				password: form.password,
				type: '用户登入'
			 },content => {
				// 这里登入成功了，跳转到填写个人信息的页面,先进行判断手机号字段是否为空 如果为空就进行
				VueCookies.set('token', content.token, { expires: '1D' })
				VueCookies.set('role', 'user', { expires: '1D' })
				get(Path.checkPhone,{
				},content => {
					if(!content){
						// 需要完善信息
						router.push("/completeInformation")
					} else {
						// 不需要完善信息
						router.push("/")
						userStore.setLoginUser()
					}
				})		
			 })
    } else {  
      return false;  
    }  
  });  
}

// 修改密码  
const formRefForForget = ref(null)
const formforget = reactive({  
  email: '',  
  Captcha: '',  
  newpassword: ''  
});  
const rulesForForget = {  
  email: [  
    { required: true, message: '请输入邮箱或手机号', trigger: 'blur' },
	  { type: 'email', message: '请输入有效的电子邮箱地址', trigger: ['blur', 'change'] }  
  ],  
  Captcha: [  
    { required: true, message: '请输入验证码', trigger: 'blur' }  
  ],
	newpassword: [  
    { required: true, message: '请输入新密码', trigger: 'blur' }  
  ]  
};
function sendEmailForForget(){
	startCountDown()
  get(Path.emailCheck,{column:'email',value:formforget.email},content => {
	   if( !content ){
			post(Path.sendEmail,{to:formforget.email,state:'修改密码'},content => {})
		} else {
			ElMessage({
				message: '该邮箱未曾注册过账号',
				type: 'warning',
			})
		}}	
	)
}
function submitFormForForget() {  
  formRefForForget.value.validate((valid) => {  
    if (valid) {  
       post(Path.fixPassword,{
				username: formforget.email,
				password: formforget.newpassword,
				code: formforget.Captcha
			 },content => {
			   changeForm('login')
			 })
    } else {  
      return false;  
    }  
  });  
}

  
const Array = ref([  
  '关于我们 | ',  
  '联系我们 | ',  
  '人才招聘 | ',  
  '商家入住 | ',  
  '广告服务 | ',  
  '手机蜜蜂 | ',  
  '友情连接 | ',  
  '销售联盟 | ',  
  '蜜蜂社区 | ',  
  '蜜蜂公益 | '  
]);  
  
const registerform = ref(false);  
const loginform = ref(true);  
const forget = ref(false);  
  
function changeForm(type) {  
  if (type === 'login') {  
    registerform.value = false;  
    loginform.value = true;  
    forget.value = false;  
  } else if (type === 'registerform') {  
    registerform.value = true;  
    loginform.value = false;  
    forget.value = false;  
  } else if (type === 'forget') {  
    registerform.value = false;  
    loginform.value = false;  
    forget.value = true;  
  }  
}  

// 组件定义  
defineExpose({  
  formregister,  
  forget,  
  formforget,  
  registerform,  
  loginform,  
  changeForm,  
  logo,  
  form,  
  background,  
  Array // 注意：通常不建议使用 Array 作为变量名，因为它会覆盖全局的 Array 构造函数  
});  
</script>   
  
<style scoped lang="scss">  
.wrapper {  
  height: 100vh;
	
}  
  
.header-container {  
  display: flex;  
  align-items: center; 
   
  justify-content: space-between;  

  background-color: #ffffff;  
  height: 10%;  
  
  .logo-container {  
    display: flex;  
    align-items: center; 
	 size: 1.25rem;
    // 如果需要调整logo和文本的间距，可以在这里添加margin  
  }  
  
    .logo-img {  
      height: 100%; // 根据需要设置图片高度  
      width: 280px;  
      margin-left: 250px; 
	 
    }  
      
      .welcome-text {  
        font-size: 1.8rem; 
    	
        color: #6d6d6d;  
        margin-right: 20px;   
      }
  
  .right-section {  
    display: flex;  
    align-items: flex-end; 
  
  }  
  
  .conversion-container {  
    display: flex;  
    align-items: center;  

  }  
  
  .conversion-img {  
    width: 30px;  
    height: 30px; 
	 margin-top: 55px;
  }  
  
  .conversion-link {  
    color: #999999; 
	 font-size: 0.75rem;
    text-decoration: none;  
	  &:hover {  
	      color: red;   
	    } 
		margin-right: 200px;
		margin-top: 50px;
  }  
}  
  
.el-main {  
	 height: 64%;
	 padding: 0;
	.main-head{
		height: 7%;
		display: flex;
		width: 100%;
		background-color: #fff8f0;
		color: #999999;
		align-items: center;
	justify-content: space-between; 
		.context{
			text-align: center;
			font-size: 0.8125rem;
			flex: 1;
		}
	}
	.main-main{
		background-color: #277eff;
	height: 93%;
		display: flex;
		overflow: hidden;
		.back-img{
	
			width: 100%;
			height: auto;
			
			background-size: 100% 100%; /* 使背景图片覆盖整个页面 */  
			    background-repeat: no-repeat; /* 图片不重复 */  
		}
		.content{
			background-color: rgba(255, 255, 255, 0.5);
			justify-content: space-between;
			 
			width: 300px;
			height: 324px;
			background-color: white;
			margin-top: 5%;
		
			margin-left: 60%;
			position: absolute;
			border-radius: 15.9px;
			
			.content-warn{
				font-size: 12px;
				text-align: center;
			padding-top: 7px;
				height: 28px;
				background-color: #fff4ea;	
				color:#FF860D;
				// postion:absolute;
				border-radius: 15px 15px 0px 0px;
			}
			.content-title{
			margin-top: 20px;
				font-size: 1.35rem;
				margin-left: 20px;
				color:#FA2C19;
			}
			.form-forget{
				font-size: 12px;
				margin-left: 230px;
				margin-top: -10px;
				margin-bottom: 6px;
				width: 50px;
				color:#666666;
				&:hover {
				    color: red;   
				  } 
			}
			.form-footer{
				background-color: #f6f6f6;
				height: 39px;
				margin-top: 40px;
				display: flex;
				align-items: center;
				border-radius: 0px 0px 15px 15px;
				.form-footer-content{
					margin-left: 230px;
					width: 50px;
					font-size: 12px;
					color:#595959;
						&:hover {
						    color: red;   
						  } 
				}
			}
		}
		
	}
   
}  
  
.el-footer {  
  background-color: #ffffff;  
  height: 26%; 
  display: flex;
  justify-content: space-between;
   flex-direction: column; 
	padding-left: 450px;
	padding-right: 450px;
	padding-top: 30px;
   a{
	   text-align: center;
	   font-size: 0.82rem;
	   color: #6d6d6d;
	   &:hover {
	       color: red;   
	     } 
   }
   .bottom{
	   padding-bottom: 120px;
	   text-align: center;
	   font-size: 0.82rem;
   }
}  
</style>